<template>
<div class="MainCase4">
<Row>
<Col span="20" class="left">
	<Table ref="table" :columns="columns" :data="data" row-key="case_no"
	:max-height="maxHeight" @on-row-click="handleRowClick" border highlight-row>
		<template #action="{ row, index }">
	      <div class="ty-flex-row-around">
			<Button icon="md-create" type="success" 
			@click="handleCheck(row, index)" v-width="80">审批</Button>
		  </div>
		</template>
	</Table>
</Col>
<Col span="4" class="right">
	<div v-for="n in docPreviews" :key="n.value" class="ivu-mb-8">
		<Button custom-icon="iconfont icon-Word" type="warning" target="_blank" ghost 
		:to="'/preview?to='+n.value+'&case_no='+selectRow.case_no+'&case_year='+selectRow.case_year" 
		>{{n.text}}
		</Button>
	</div>
</Col>
</Row>
<router-view/>
</div>
</template>
<script>
export default{
	data(){
		return {
			columns:[
				{title:'编号',key:'case_no',minWidth:70},
				{title:'案由',key:'cause_name',minWidth:220,ellipsis:true},
				{title:'当事人',key:'party_name',minWidth:160,ellipsis:true},
				{title:'类别',key:'party_type',minWidth:80},
				{title:'程序',key:'procedure',minWidth:100},
				{title:'审批类型',key:'status_name',minWidth:120},
				{title:'承办人',key:'legal_name',minWidth:80},
				{title:'操作',slot:'action',minWidth:80}
			],
			data:[],
			selectRow:{},
			docPreviews:[]
		}
	},
	computed:{
		maxHeight(){
		  return window.innerHeight-180
		}
	},
	methods:{
		handleRowClick(row,index){
			this.selectRow=row
			const array=row.docs.split(",")
			this.docPreviews=this.$store.getters.getAllDoc.filter(e=>{
				return array.includes(e.value)
			})
		},
		handleCheck(row, index){
			this.$router.push({name:'doc'+row.status_code,query:{case_no:row.case_no,party_type:row.party_type}})
		},
		getMainCase4List(){
		   this.$axios.post("mainCase4List.action")
		   .then(res=>{
				this.data=res.data
		   })
		}
	},
	mounted() {
		this.getMainCase4List()
	},
	beforeRouteUpdate(to,from,next){//路由钩子
		if(from.fullPath=='/main/MainCase4'){
			next()
		}else if(to.fullPath=='/main/MainCase4'){
			this.getMainCase4List()
			next()
		}
	}
}
</script>
<style scoped>
.left{
padding: 16px;
}
.right{
padding: 16px;
}
</style>